<template>
  <div>
    <!-- globalButton -->
    <slot v-if="!globalButton.length" name="globalButton" :selection="selection"></slot>
    <div v-else class="global-button">
      <el-button
        v-for="(item, index) in globalButton"
        :key="index"
        v-bind="item.bind"
        @click="item.clickHandler(selection, item.bind)"
      >
        {{ item.bind.title }}
      </el-button>
    </div>
    <!-- 表格核心 -->
    <el-table
      v-if="Object.keys(options).length > 0"
      ref="msuiDatagrid"
      :data="data"
      v-bind="bind"
      v-loading="loading"
      v-on="vOn"
    >
      <!-- 暂无数据 -->
      <template #empty>
        <slot name="empty">
          <el-empty class="content-main" :image="empty"></el-empty>
        </slot>
      </template>
      <!-- 多选框 -->
      <slot v-if="!selection"></slot>
      <el-table-column v-else type="selection" :align="selection.align || 'center'" :width="selection.width || 50" />

      <!-- 展开 -->
      <el-table-column
        v-if="expand"
        type="expand"
        label="展开"
        :align="expand.align || 'center'"
        :width="expand.width || 50"
      >
        <template slot-scope="{ row }">
          <slot name="expandView" :row="row" :options="datagridModel._options" />
        </template>
      </el-table-column>

      <!-- 序号 -->
      <slot v-if="!index" name="index"></slot>
      <el-table-column
        v-else
        :label="index.label || '序号'"
        :width="index.width || 50"  
        :align="index.align || 'center'"
        type="index"
        :index="index.indexMethod || indexMethod"
      />
      <!-- 表格列 -->
      <template v-for="item in datagridModel">
        <el-table-column :key="item.prop" v-bind="item" v-if="item.show">
          <!-- 表格插槽 插槽使用 -->
          <template v-if="$scopedSlots[item.prop]" #default="{ row, column, $index }">
            <slot :name="item.prop" :row="row" :column="column" :dom="$index" :currentModel="item"> </slot>
          </template>
          <!-- 表格字段 formatters -->
          <template v-else-if="item.formatters" #default="{ row }">
            <span>{{ item.formatters(row[item.prop]) }}</span>
          </template>
        </el-table-column>
      </template>

      <!-- inlineButton -->
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        v-if="inlineButton.length > 0"
        :width="options.inlineButtonWidth || inlineButton.length * 60"
      >
        <template slot-scope="scope">
          <slot
            v-if="$scopedSlots.inlineButton"
            name="inlineButton"
            :scope="scope"
            :inlineButton="inlineButton"
          >
          </slot>
          <template v-if="!$scopedSlots.inlineButton">
            <template v-for="(item, index) in inlineButton">
              <el-button
                :title="item.title"
                :icon="item.icon"
                :style="getStyle(item, scope.row)"
                :disabled="disabled(item, scope.row)"
                :size="'mini'"
                :type="'text'"
                :v-show="item.show"
                @click="item.clickHandler(scope, data)"
              >
                {{ item.title }}
              </el-button>
              <el-divider :key="index" direction="vertical" v-if="index != inlineButton.length - 1"> </el-divider>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { elTable } from '../msui-utils/msui-default'
import empty from './static/empty.png'
export default {
  name: 'MsuiDatagrid',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      empty
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.$refs.msuiDatagrid.doLayout()
      })()
    }
  },
  destroyed() {
    window.onresize = null
  },
  updated() {
    // 修复表格错位
    this.$nextTick(() => {
      this.$refs.msuiDatagrid.doLayout()
    })
  },
  watch: {
    $route: {
      handler(val) {
        this.$nextTick(() => {
          if (this.$refs.msuiDatagrid) {
            this.$refs.msuiDatagrid.doLayout()
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    bind() {
      return Object.assign({}, elTable, this.options.bind)
    },
    loading() {
      return this.options?.bind?.loading || false
    },
    vOn() {
      return this.options.vOn || {}
    },
    globalButton() {
      return this.options.globalButton ? this.options.globalButton : []
    },
    inlineButton() {
      return this.options.inlineButton ? this.options.inlineButton : []
    },
    datagridModel() {
      return this.options.datagridModel
    },
    index() {
      return this.options.index || false
    },
    selection() {
      return this.options.selection || false
    },
    expand() {
      return this.options.expand || false
    },
    data() {
      return this.options.data
    }
  },
  methods: {
    disabled(item, row) {
      if (item.disabled instanceof Function) {
        return item.disabled(row)
      } else {
        return false
      }
    },
    getStyle(item, row) {
      let re = this.disabled(item, row)
      if (re == false) {
        return item.style
      } else {
        return {}
      }
    },
    inlineButtonViable(item, row) {
      if (item.visable instanceof Function) {
        return item.visable(row)
      } else {
        return true
      }
    },
    indexMethod(index) {
      return index + 1
    },
    setSelection(selection, boolean = true) {
      this.$nextTick(() => {
        selection.forEach((row) => {
          this.$refs.msuiDatagrid.toggleRowSelection(row, boolean)
        })
      })
    }
  }
}
</script>
<style scoped>
.global-button {
  display: flex;
  margin-bottom: 10px;
}

::v-deep .el-table__empty-text {
  line-height: 5px;
  font-size: 14px;
}
</style>
